<template>
	<view class="indexWarpBody">
		<view class="w-mask-zoom" :style="[zoomStyle]" v-if="!start"></view>
		<view class="page-index">
			<view class="header">
				<view class="serch-wrapper">
					<navigator url="/pages/goods_search/index" class="input" hover-class="none">
						<text class="iconfont iconsousuo-copy"></text>
						<text style="flex: 1;">{{$t('cloudW.searchForProductOrBrand')}}</text>
						<!-- <view class="iconfont iconxiangji5" @click.stop="bandTusou"></view> -->
					</navigator>
					<view class="tusou" @click="set_where">
						<view>ALL</view>
						<view class="tit">{{$t('cloudW.all')}}</view>
					</view>
				</view>
				<tabNav v-if="navTop.length != 0" class="tabNav" :class="{'fixed':isFixed}" :tabTitle="navTop" :navTopNum="navTopNum"
					@changeTab='changeTab'></tabNav>
			</view>
		</view>
		<!-- 首页展示 -->
		<mescroll-item ref="mescrollItem" v-for="(tab,i) in navTop" :key="i" :i="i" :index="navIndex" :tabs="navTop">
		</mescroll-item>
		<block v-if="navTop.length == 0">
			<view class="noCommodity">
				<view class='pictrue'>
					<image src='/static/images/noCommodity.png'></image>
					<view class="errorText">{{$t('cloudW.noPlatformToRecommend')}}~</view>
				</view>
			</view>
		</block>
		<!-- 筛选 -->
		<view class="shaixuanMask" @click="isShaiXuan = true" :style="{right:isShaiXuan?'-750rpx':'0'}">
			<filters ref="creening" class="shaixuanCon" :shaixuan1="shaixuan1" :shaixuan2="shaixuan2" @queding="queding"
				@quxiao="quxiao" :isDiqu="true" :diquType="diquType" :style="{right:isShaiXuan?'-750rpx':'0'}"
				:bottomH="true"></filters>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		zoneList,
	} from '@/api/store.js';
	import {
		formatTime
	} from "@/utils/common.js";
	import tabNav from '@/components/tabNav.vue'
	import filters from '@/components/filters/filters.vue';
	import downLoadImg from '@/components/downLoadImg/downLoadImg.vue';
	import MescrollItem from "./index-more-item.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	export default {
		mixins: [MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命
		computed: mapGetters(['isLogin', 'uid', 'iconList']),
		components: {
			tabNav,
			downLoadImg,
			filters,
			MescrollItem
		},
		data() {
			return {
				searchH: 0, //顶部输入框高度
				isFixed: false, //顶部输入框是否固定
				navTop: [], //首页导航数据
				navIndex: 0, //首页导航栏下标
				navTopNum: 3, //首页导航展示个数
				loadend: false, //分页是否结束
				loading: false,
				loadTitle: '加载更多', //分页提示字
				where: { //商品列表筛选条件
					page: 1,
					limit: 20,
					keyword: '',
					priceOrder: '',
					stockArea: [],
					brandIds: [],
					cid: [],
					cids: [],
					attrs: [],
					minPrice: null,
					maxPrice: null,
				},
				sortProduct: [{
						sliderImage: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
							'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
						]
					},
					{
						sliderImage: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
							'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
						]
					},
					{
						sliderImage: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
							'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
						]
					},
					{
						sliderImage: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
							'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
						]
					}
				], //商品数据
				isShaiXuan: true, //是否开启筛选
				shaixuan1: {}, //筛选结果
				shaixuan2: {}, //筛选数据
				diquType: '', //筛选地区状态

				current: 0, // 指示点
				mode: 'default',
				dotsStyles: {
					backgroundColor: "rgba(255,255,255,.4)",
					selectedBackgroundColor: "rgba(255,255,255,1)",
				},

				adviceData: {}, // 首页信息数据
				productList: [], // 专区tab切换数据
				listQuery: {
					page: 1,
					limit: 99999,
					zoneType:0,
					endTime: (formatTime(new Date())).toString().replace(/\//g,'-'),
				},
				imgLoadBG: app.globalData.imgLoadBG,

				start: true,
				zoomStyle: {
					opacity: 1
				},
			}
		},
		onLoad(options) {
			let self = this
			this.getZoneList()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.cloudWarehouse')
			});
		},
		mounted() {
			let self = this
			// 获取H5 搜索框高度
			let appSearchH = uni.createSelectorQuery().select(".serch-wrapper");
			appSearchH.boundingClientRect(function(data) {
				self.searchH = data.height
			}).exec()
		},
		methods: {
			// 获取专区tab
			getZoneList() {
				var _this = this
				zoneList(this.listQuery).then(res => {
					_this.navTop = res.data.list
				}).catch((e) => {
					console.info(e)
				});
			},
			// 图搜
			bandTusou() {
				uni.navigateTo({
					url: "/pages/goods_management/index?tusouimg=true&id=0"
				})
			},

			//跳转品牌商品列表页
			goBrand(item) {
				uni.setStorage({
					key: "shangjiaData",
					data: JSON.stringify(item)
				})
				uni.navigateTo({
					url: `/pages/index/brandList?id=${item.brand.id}`
				})
			},

			// 导航分类切换
			changeTab(e) {
				this.navIndex = e.index
			},
			// 筛选确定
			queding(shaixuan, shaixuanReq) {
				this.where.brandIds = shaixuanReq.brandIds
				this.where.cids = shaixuanReq.cids
				this.where.attrs = shaixuanReq.attrs
				this.where.minPrice = shaixuanReq.minPrice
				this.where.maxPrice = shaixuanReq.maxPrice
				this.isShaiXuan = true

				this.loadend = false;
				this.$set(this.where, 'page', 1);
				this.get_product_list(true);
			},
			//筛选重置
			quxiao() {
				this.where = {
					page: 1,
					limit: 20,
					keyword: '',
					priceOrder: '',
					stockArea: [],
					brandIds: [],
					cids: [],
					attrs: [],
					minPrice: null,
					maxPrice: null,
					cid: this.where.cid
				}
				this.isShaiXuan = true

				this.loadend = false;
				this.$set(this.where, 'page', 1);
				this.get_product_list(true);
			},
			operation(str) {
				if (!str) {
					return
				}
				var val = str.slice(0, str.length - 1)
				return Number(val)
			},
			set_where() {
				uni.navigateTo({
					url: '/pages/goods_management/index'
				})
				// this.isShaiXuan = !this.isShaiXuan
				// this.$refs.creening.navH = 0
				// this.$refs.creening.getAddFilterHeight()
				// console.info(this.$refs.creening.addFilterHeight)
			},
		},
		// 滚动监听
		onPageScroll(e) {
			// let self = this
			// if (e.scrollTop > self.searchH) {
			// 	self.isFixed = true
			// } else {
			// 	self.isFixed = false
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.page-index {
		background: linear-gradient(180deg, #fff 0%, #fff 100%);
		position: fixed;
		z-index: 997;
		width: 100%;
		.fixed {
			width: 100%;
			z-index: 100;
			position: fixed;
			left: 0;
			top: 0;
			background: #fff;
			border-bottom: 1rpx #eee solid;
		}

		.header {
			width: 100%;
			// height: 170rpx;

			.serch-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 14rpx 27rpx;

				.input {
					display: flex;
					align-items: center;
					width: 616rpx;
					height: 68rpx;
					padding: 0 0 0 20rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 5rpx;
					color: #999;
					font-size: 28rpx;
					font-weight: 300;

					.iconfont {
						margin-right: 20rpx;
					}
				}

				.tusou {
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #222222;
					text-align: center;
				}
			}
		}

		.nav {
			height: 86rpx;
			color: #454545;
			width: 100%;
			font-size: 28rpx;
			background-color: #fff;
			border-top: 1px solid #E6E6E6;

			.item {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;

				.iconfont {
					font-size: 28rpx;
					margin-left: 10rpx;
				}

				.iconWarp {
					width: 30rpx;
					font-size: 0;

					.iconshangsanjiao {
						position: relative;
						bottom: -8rpx;
					}

					.iconxiasanjiao {
						position: relative;
						top: -8rpx;
					}
				}

				image {
					width: 15rpx;
					height: 19rpx;
					margin-left: 10rpx;
				}
			}

			.item.font-color {
				font-weight: bold;
			}
		}



		.downLoadImg {
			width: 140rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			padding-left: 24rpx;
			margin-left: 22rpx;

			.iconfont {
				font-size: 36rpx;
				margin-right: 8rpx;
			}
		}
	}

	.shaixuanMask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		right: -750rpx;
		z-index: 9999;

		.shaixuanCon {
			position: fixed;
			top: 0;
			right: -750rpx;
			z-index: 9999;
			transition: all 0.4s ease-in-out;
		}

		&::v-deep .productSort {
			width: 670rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		&::v-deep .bottomNav {
			width: 670rpx;
		}
	}

	.w-mask-zoom {
		height: 100vh;
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		z-index: 99999;
		transition: opacity .5s;
		opacity: 1
	}

	.sukShow {
		display: flex;
		flex-wrap: wrap;
		overflow-y: hidden;
		height: 46rpx;

		view {
			font-size: 20rpx;
			font-weight: 400;
			color: #9e9e9e;
			border-radius: 8rpx;
			border: 1rpx solid #d3d3d3;
			padding: 3rpx 10rpx 3rpx;
			margin: 10rpx 10rpx 0 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>
